//-
    Match with Design Guide status:

        [ ] 1. Example implementation
        [ ] 2. Simple variable
        [ ] 3. Unbound instances
        [ ] 4. Bound instances and/or live feed
        [ ] 5. {{#if }} ... {{/if}} block
        [ ] 6. Test on mobile
        [ ] 7. Change sizes
        [ ] 8. Match theme
anchor file-read
.ui.segments
    h3.ui.top.attached.block.header file-read
    .ui.attached.segment
        pre file-read(on-read="fileReadHandler" [multiple] [accept=".xml"])
        p
            code on-read = (ev, file, next) ->
        .ui.bulleted.list
            .item #[code ev]: #[code ack-button] event
            .item #[code file] is an object: #[code {name: "name of file", content: "content"}]
            .item #[code next] is function to proceed to next file (if multiple selected)

    .ui.segment
        h3 Example 
        .ui.two.column.grid
            .row
                .column
                    // a checkbox to toggle one component instance ||meets 5||
                    checkbox(checked="{{ fileRead.show }}") Show/hide Bound component 1
                    h3 Bound component 1
                    // a component instance that is created on demand
                    +if('fileRead.show')
                        file-read(on-read="uploadReadFile" multiple accept=".csv") Get contents!

                    ack-button(on-buttonclick="fileReadClear" type="danger") Clear

                .column
                    h2 Contents of uploaded files:
                    ul
                        +each('fileRead.files')
                            li
                                h3 Filename: {{ .name }}
                                p Contents: {{ .content }}
